import { Suspense, useEffect, useState } from "react";
import styled from "styled-components";
import { Camera } from "./components/Camera";
import { getVideoStream } from "./utils/getVideoStream";
import { Canvas, useLoader, ThreeElements } from "@react-three/fiber";
import { Loading1 } from "../../components/Loading/Loading1/Loading1";
import { Scene } from "./components/Scene";

//相机
const Box = styled.div`
  width: 100%;
  height: 100%;
  position: relative;
`;
/**
 *
 * @returns 获取相关设备
 */
export async function getVideoDevices() {
  const devices = await navigator.mediaDevices.enumerateDevices();
  const videoDevice = devices.find((item) => item.kind === "videoinput");
  return videoDevice;
}
export function FaceModel() {
  const [stream, setStream] = useState<MediaStream | null>(null);
  const init = async () => {
    // 获取设备
    const videoDevice = await getVideoDevices();
    if (videoDevice) {
      //获取媒体流
      getVideoStream(videoDevice.deviceId).then((res) => {
        setStream(res as MediaStream);
      });
    }
    
    
  };
  useEffect(() => {
    init();
  }, []);
  return (
    <>
      <Box>
        {stream ? <Camera stream={stream}></Camera> : "未获取到设备"}
        <Canvas
          style={{
            position: "absolute",
            width: "100%",
            height: "100%",
            left: 0,
            top: 0,
          }}
        >
          <Suspense fallback={<Loading1 />}>
            <Scene></Scene>
          </Suspense>
        </Canvas>
      </Box>
    </>
  );
}
